<template>
  <div>
    <!-- 嵌套路由  
         根据二级路由地址动态显示routerview的内容 -->
    <router-view></router-view>

    <!-- 底部选项卡 -->
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="index">首页
        <img v-if="selected=='index'" 
            src="@/assets/main_1.png" slot="icon">
        <img v-else src="@/assets/main_0.png" slot="icon">   
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'" 
             src="@/assets/me_1.png" slot="icon">
        <img v-else src="@/assets/me_0.png" slot="icon">
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: this.$route.path.split('/').pop(),    // 底部选项卡的默认选中项
    }
  },
  activated(){
    //console.log('activated:', this.selected)
    this.selected = 'index'
  },
  watch: {
    /** 监听selected的变化 */
    selected (newval, oldval){
      console.log(newval)
      // newval目标地址，不能是当前浏览器中的地址
      if(newval==this.$route.path.split('/').pop()) return

      if(newval=='me'){
        this.$router.push('me')
      }else if(newval=='index'){
        this.$router.push('index')
      }
      // this.$router.push(newval)
    }
  }
}
</script>

